/*定义公共样式*/
.wrap{
    width: 1170px;
    margin: 0 auto;
}
body{
    overflow-x: hidden;
}
/*header*/
.nav{
    width:100%;
    height:146px;
    border-bottom:1px solid #d9d9d9;
    .nav-top{
        width:100%;
        height:36px;
        line-height:36px;
        font-size:12px;
        background-color:#333333;
        .nav-top-left{
            .nav-top-left-tips{
                width:105px;
                color:#fff;
                background:url("/img/nav/trumpet.png") no-repeat center right;
                background-size:16px;
            }
            .nav-list-swiper{
                & a{
                    color:#fff;
                    display:block;
                    padding-left:12px;
                }
            }
        }
        .nav-top-right{
            text-align:right;
            display:inline-block;
            color:#fff;
            & span{
                margin:0 9px;
            }
            & a{
                color:#fff;
            }
        }
    }
    .nav-bottom{
        width:100%;
        height:82px;
        margin-top:28px;
        .logo{
            width:130px;
            height: 53px;
            display:block;
            background:url("/img/nav/logo.png")no-repeat center center;
        }
        .search{
            width: 500px;
            height: 80px;
            margin-left:184px;
            margin-top:2px;
            box-sizing: border-box;
            .search-top{
                width:500px;
                height:36px;
                border:2px solid #669acc;
                position:relative;
                border-radius:3px;
                & input[type="text"]{
                    width:436px;
                    height:100%;
                    padding-left:18px;
                    font-size:12px;
                    color:#333;
                    float:left;
                }
                & input[type="button"]{
                    width:60px;
                    height:100%;
                    cursor:pointer;
                    background:url("/img/nav/search.png") no-repeat center center;
                    background-color:#669acc;
                }
                .search-result{
                    width:439px;
                    height:auto;
                    position:absolute;
                    top:32px;
                    left:-2px;
                    z-index:11;
                    border:2px solid #669acc;
                    background:#fff;
                    & li{
                        & a{
                            display:block;
                            padding-left:10px;
                            width:100%;
                            height:30px;
                            line-height:30px;
                        }
                        & a:hover{
                            background:#f5f5f5;
                        }
                    }
                }
                .active{
                    display:none;
                }
            }
            .search-bottom{
                width:100%;
                height:27px;
                & a{
                    font-size:12px;
                    display:block;
                    float:left;
                    line-height:27px;
                    padding:0 10px;
                    color:#999999;
                }
            }
        }
        .cart{
            width:129px;
            height:36px;
            line-height:36px;
            margin-top:2px;
            border-radius:3px;
            padding:0 14px;
            font-size:14px;
            cursor:pointer;
            border:1px solid #d9d9d9;
            & span, & img, & i{
                display:block;
                float: left;
                height:34px;
            }
            & img{
                width:20px;
                height: 20px;
                margin:7px 9px 0 6px;
            }
            & i{
                width:22px;
                height:22px;
                line-height:22px;
                text-align:center;
                font-style: normal;
                border-radius:10px;
                font-size:12px;
                color:#fff;
                margin-top:6px;
                background:#e33955;
            }
        }
    }
}
/*footer*/ 
.footer{
    width:100%;
    height:410px;
    background:#f5f5f5;
    & .wrap{
        height:374px;
        .footer-top{
            width:100%;
            height:133px;
            background:url("/img/nav/footer-top.png") no-repeat center center;
            border-bottom:1px solid #d9d9d9;
        }
        .footer-bottom{
            padding-left:100px;
            padding-top:30px;
            & dl{
               float:left; 
               & dt{
                   height:48px;
                   line-height:48px;
                   font-size:14px;
                   color:#333;
               }

               & dd{
                   & p{
                        height:24px;
                        line-height:24px;
                        & a{
                            color:#333;
                            font-size:12px;
                        }
                        & a:hover{
                            color:#6699cc;
                        }
                   }
               }
               
            }
            .about{
                width:255px;
                .weibo,.weixin{
                    width:48px;
                    height:48px;
                    margin-right:17px;
                    float:left;
                    cursor:pointer;
                }
                .weixin{
                    position:relative;
                    .code{
                        display:none;
                        position:absolute;
                        top:48px;
                        width:100px;
                        height:100px;
                        & img{
                            margin-top:10px;
                            margin-left:-25px;
                        }
                    }
                }
                .weixin:hover .code{
                    display:block;
                    transition: all .5;
                }
            }
            .serve{
                width:188px;
            }
            .logistics{
                width:212px;
            }
            .aboutUs{
                width:184px;
            }
        }
    }
    .record{
        height:36px;
        line-height:36px;
        text-align:center;
        color:#fff;
        font-size:12px;
        background:#333;
    }
}

/*右侧菜单*/ 
.sidebar_r{
    position:fixed;
    right:0;
    width:70px;
    height:auto;
    background:#fff;
    top:60%;
    z-index:10;
    .pub{
        width:70px;
        height:70px;
        padding-top:40px;
        font-size:12px;
        line-height:30px;
        text-align:center;
        color:#666;
        cursor:pointer;
        border:1px solid #d9d9d9;
    }
    & ul{
        width:70px;
        & li{
            @extend .pub;
        }
        .contact{
            border-radius:5px 5px 0 0;
            border-bottom:none;
            background:url("/img/nav/er.png") no-repeat center 16px;
        }
        .cart_shopping{
            border-radius:0 0 5px 5px;
            background:url("/img/nav/cart.png") no-repeat center 16px;
        }
    }
    .back-top{
        margin-top:30px;
        display:block;
        @extend .pub;
        padding-top:30px;
        line-height:20px;
        border-radius:5px;
        border:1px solid #d9d9d9;
        background:url("/img/nav/backTop.png") no-repeat center 24px;
        background-color:#6699cc;
        color:#fff;
    }
}



/*热卖推荐cart.html list.html页面的可复用样式*/ 
.cart-recommending{
    width:1170px;
    margin-top:40px;
    overflow: hidden;
    position: relative;
    height:auto;
    .cart-recommending-title{
        width:1170px;
        height: 48px;
        line-height:48px;
        padding-left:14px;
        color:#333;
        font-size:15px;
        border:1px solid #e5e5e5;
        border-radius:5px;
        font-weight:normal;
        background:#f5f5f5;
    }
    .cart-recommending-list{
        width:1190px;
        height:270px;
        margin-top:20px;
        margin-bottom:32px;
        & li{
            width:218px;
            height:270px;
            float:left;
            margin-right:20px;
            border-radius:5px;
            border:1px solid #e5e5e5;
            & img{
                width:178px;
                height:178px;
                display:block;
                margin:20px auto 0 auto;
            }
            & p{
                padding:0 5px;
                text-align:center;
                font-size: 12px;
                color:#333;
                line-height:30px;
                .new-price{
                    color:#e33955;
                }
                .old-price{
                    color:#999;
                    margin-left:10px;
                    text-decoration:line-through;
                }
            }
        }
        & li:hover img{
            transition:all .5s;
            transform:scale(1.1);
        }
    }
}


/*登录，注册页面的布局*/ 
.login-register{
    width:100%;
    height:570px;
    .login-register-bg{
        width:1920px;
        height:570px;
        // margin-left:-375px;
        background:url(/img/login/bg.png) no-repeat center center;
        .login-register-wrap{
            position:absolute;
            width:1170px;
            height:570px;
            left:0;
            right:0;
            margin:0 auto;
            .login-register-box{
                width:380px;
                height:490px;
                position:absolute;
                background:#fff;
                top:0;
                bottom:0;
                right:0;
                padding:40px;
                border:1px solid #e5e5e5;
                margin:auto 0;
                border-radius:5px;
                
            }
        }
    }
}
/*登录注册输入框样式*/ 
.publice-lo-re{
    width:298px;
    height:40px;
    border-radius:3px;
    padding-top:6px;
    margin-bottom:16px;
    border:1px solid #e5e5e5;
}
/*登录组成label样式，输入框左边的图标*/ 
.user{
    width:34px;
    height:28px;
    display:block;
    float:left;
    border-right:1px solid #e5e5e5;
}
/*登录注册的input输入框的样式*/ 
.lo-re-input{
    width:251px;
    float:left;
    display:block;
    background:#fff;
    height:28px;
    padding-left:10px;
}
/*提交按钮的样式*/ 
.submit{
    width:298px;
    height:46px;
    display:block;
    border-radius:3px;
    text-align:center;
    line-height:46px;
    font-size:20px;
    font-weight:400;
    margin-top:31px;
    color:#fff;
    background:#6699cc;
}